<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./index.css">
    <script src="https://unpkg.com/vue"></script>
    <title>vue实战1</title>
</head>
<body>
<div class="main" id="vue-app">
    <!--图片-->
    <div class="bag" v-bind:class="{ burst:ended }"></div>

    <!--进度条-->
    <div class="pro-wrapper">
        <div class="progress" v-bind:style="{ width: remain + '%' }"></div>
    </div>

    <!--按钮-->
    <div class="btn-wrapper">
        <button v-on:click="punch()" v-show="!ended">猛戳我</button>
        <button v-on:click="restart()">重新开始</button>
    </div>

</div>

<script src="./index.js"></script>
</body>
</html>